<template>
  <div class="">
<!--    :collapse="true"-->
<!--    text-color="var(&#45;&#45;theme-color)"-->
    <el-menu
        :uniqueOpened="true"
        default-active="0"
        background-color="white"
        :collapse="!isPC()"
        router
        class="menu"
        v-bind="$attrs"
    >
      <el-menu-item index="1" route="/home/index" >
        <el-icon ><HomeFilled /></el-icon>
        <template #title>
          首页
        </template>
      </el-menu-item>
      <el-sub-menu index="2">

        <template #title>
          <el-icon ><Expand /></el-icon>
          <span>新手教程</span>
        </template>
        <el-menu-item index="2-1" route="/home/teach/primary">
          <el-icon >
            <i class="iconfont icon-xinshourumen"></i>
          </el-icon>
          <template #title>

            基础教学
          </template>
        </el-menu-item>
        <el-menu-item index="2-2">

          <template #title>
            <el-icon ><DataAnalysis /></el-icon>
            进阶教程
          </template>
        </el-menu-item>
      </el-sub-menu>


      <el-sub-menu index="3"  route="/home/practice/letter">

        <template #title>
          <el-icon >
            <i class="iconfont icon-keyborad"></i>
          </el-icon>
          <span> 基础练习</span>
        </template>
        <el-menu-item index="3-1"  route="/home/practice/letter">
          <template #title>
            <el-icon >
              <i class="iconfont icon-ziti"></i>
            </el-icon>
            字母练习
          </template>
        </el-menu-item>
        <el-menu-item index="3-2" route="/home/practice/text">
          <template #title>
            <el-icon ><Edit /></el-icon>
            文字练习
          </template>
        </el-menu-item>
        <el-menu-item index="3-3"  route="/home/practice/letter">
          <el-icon >
            <i class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"> </i>
          </el-icon>
          <template #title>
            游戏练习
          </template>
        </el-menu-item>

      </el-sub-menu>
      <el-sub-menu index="4" route="">

        <template #title>
          <el-icon ><Edit /></el-icon>
          <span>闯关大挑战</span>
        </template>
        <el-menu-item index="4-1"  route="/home/practice/letter">
          <el-icon >
            <i class="iconfont icon-zhongwen"></i>
          </el-icon>
          <template #title>

            中文闯关
          </template>
        </el-menu-item>
        <el-menu-item index="4-2"  route="/home/practice/letter">
          <el-icon >
            <i class="iconfont icon-yingwen"></i>
          </el-icon>
          <template #title>
            英文闯关
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="5" route="/home/scheme/square">
        <el-icon><Goods /></el-icon>
        <template #title>方案广场</template>
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon ><Medal /></el-icon>
        <template #title>排行榜</template>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script lang="ts" setup>


import {Edit, Expand, Goods, Medal} from "@element-plus/icons";
import {isPC} from "@/utils/CommonUtil";
</script>

<style scoped lang="less">

</style>